<template>
    <div id="findUser">
      <div class="scoll">
        <el-table
          :data="
            tablelist.filter(
              (data) =>
                !search ||
                data.userName.toLowerCase().includes(search.toLowerCase())
            )
          "
          
          class="findtable animate__animated animate__bounceInLeft"
        >
          <el-table-column label="用户ID" prop="userId" width="180px">
          </el-table-column>
          <el-table-column label="用户名" prop="userName" width="260px">
          </el-table-column>
          <el-table-column label="关注数量" prop="likes" width="180px">
          </el-table-column>
          <el-table-column label="收藏好物数量" prop="collect" width="180px">
          </el-table-column>

          <el-table-column align="right" width="260px">
            <template slot="header" slot-scope="scope">
              <el-input
                v-model="search"
                size="mini"
                placeholder="输入关键字搜索"
              />
            </template>
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >Delete</el-button >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <!-- <el-pagination
        @current-change="handleChange"
        id="posteditPage"
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="8"
      >
      </el-pagination> -->
    </div>

</template>

<script>
export default {
  data() {
    return {
      tablelist: [],
      search: "",
      total: 0,
    };
  },
  mounted() {
    this.$axios
      .get("/api/appusers/userlist")
      .then((res) => {
        if (res.data.code == 0) {
          // console.log(res.data.infos)
          this.tablelist = res.data.infos;
          // this.total = res.data.infos[1];
          // this.tableData.follow =  res.data.infos[0].follow.length;
          this.tablelist.map((item, index) => {
            item.likes = item.likes.length;
            item.collect = item.collect.length;
          });
        }
      })
      .catch((error) => {});
  },
  methods: {
    // handleChange(nowpage) {
    //   this.$axios
    //     .get("/api/appusers/userlist", {
    //       params: { page: nowpage },
    //     })
    //     .then((res) => {
    //       if (res.data.code == 0) {
    //         this.tableData = res.data.infos;
    //       }
    //     })
    //     .catch(() => {});
    // },
    handleDelete(index, row) {
      //删除
      console.log(row);
      var _id = row.userId;
      var index = index;
      this.$confirm("此操作将永久删除该用户，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .get("/api/appusers/deleteuser", { params: { userId: _id } })
            .then((res) => {
              if (res.data.code == 0) {
                this.$message({
                  message: "删除成功",
                  type: "success",
                });
                this.tablelist.splice(index, 1);
              } else {
                this.$message({
                  message: "删除失败",
                  type: "err",
                });
              }
            })
            .cath(() => {});
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
#findUser{
  width: 90%;
  margin: 0 auto;
  height: 100%;
  // overflow-y: auto;
}
.el-table__header-wrapper{
  width:80%;
}
.scoll{

  .el-table{
    padding: 30px;
    opacity: 0.8;
    .el-table__body-wrapper {
      // overflow-y: auto;
    }
  }
}

#posteditPage {
  margin-top: 20px;
}
.findtable {
  //  width: 100%;
  overflow: auto;
  margin: 10px auto;
}
.el-input__inner {
  width: 200px;
}

</style>
